<!--
 * @Author: C.
 * @Date: 2022-01-18 10:21:29
 * @LastEditTime: 2022-01-20 11:34:49
 * @Description: file content
-->
<template>
  <div>
    <jv-table :tableObj="tableObj">
      <template #operation="{ row }">
        <TableAction
          :actions="[
            {
              label: '删除',
              icon: 'el-icon-delete',
              popConfirm: {
                title: '是否删除？',
                confirm: operation.bind(null, row)
              }
            },
            {
              icon: 'el-icon-delete',
              disabled: true,
              popConfirm: {
                title: '是否删除？',
                confirm: operation.bind(null, row)
              }
            }
          ]"
          :dropDownActions="[
            {
              label: '启用',
              popConfirm: {
                title: '是否启用？',
                confirm: operation.bind(null, row)
              }
            }
          ]"
        />
      </template>
    </jv-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          amount: 18
        },
        {
          name: "李四",
          amount: 19
        }
      ],
      tableObj: {}
    };
  },
  created() {
    this.tableObj = this.$JTable({
      tableSchema: [
        {
          prop: "name",
          label: "导出配置",
          // 导出配置
          exportConfig: {
            // 禁用这个字段的导出功能
            disabled: true
          }
        },
        {
          prop: "amount",
          label: "金额合计",
          align: "right",
          filter: "amount",
          commonConfig: {
            // 当前列 是否合计
            summary: true,
            // 单位
            unit: "元"
          }
        }
      ],
      title: "表格demo",
      data: this.tableData,
      showSummary: true
    });
  },
  methods: {
    operation(row) {
      alert(row.name);
    }
  }
};
</script>
